<template>
  <Page>
    <p-header title="About"/>
    <GridLayout class="root">
      <StackLayout>
        <StackLayout class="top-part">
          <image src="~/images/logo.png"/>
          <label textWrap="true" text="7Exchange aims to provide stellar digital currency exchange services around the globe. With offices spanning between the United Kingdom and India, expanding global adoption for cryptocurrencies as a whole in a transparent manner is our number one priority! Sign up to get started."/>
        </StackLayout>
        <GridLayout class="line" columns="*, auto, auto">
          <label text="Contact Us" col="0" class="title" verticalAlignment="center"/>
          <label text="community@7exchange.io" col="1" class="desc" verticalAlignment="center"/>
        </GridLayout>
        <GridLayout class="line" columns="*, auto, auto" @tap="checkUpgrade">
          <label text="Version" col="0" class="title" verticalAlignment="center"/>
          <label :text="version" col="1" class="desc" verticalAlignment="center"/>
          <Image col="2" src="~/images/arrow_right.png" class="indicator"/>
        </GridLayout>
      </StackLayout>
      <GridLayout v-if="dialogVisible" class="mask">
        <StackLayout class="dialog" verticalAlignment="center">
          <image class="top-icon" src="~/images/update.png"/>
          <label class="version" :text="'version: ' + newVersion"/>
          <label textWrap="true" class="desc" :text="!hasNew? 'No new version' : 'The latest version is ready, would you like to install it?'"/>
          <GridLayout columns="*, auto, *" class="dialog-btns">
            <button :text="hasNew? 'Later' : 'Cancel'" col="0" @tap="cancelPressed"/>
            <AbsoluteLayout class="divider" col="1"/>
            <button :text="hasNew? 'Update Now' : 'OK'" col="2" class="ok-btn" @tap="upgradePressed"/>
          </GridLayout>
        </StackLayout>
      </GridLayout>
    </GridLayout>
  </Page>
</template>
<script>
import {get} from '~/business/NetRequest'
import Header from './Header'
const appversion = require("nativescript-appversion");
const utilsModule = require("tns-core-modules/utils/utils");
import loaderGen, {loadingOption} from '~/utils/loading'

export default {
  data() {
    return {
      version: '',
      newVersion: '',
      dialogVisible: false
    }
  },
  computed: {
    hasNew() {
      return this.version != this.newVersion
    }
  },
  components: {
    'p-header': Header,
  },
  mounted() {
    let self = this
    appversion.getVersionName().then(function(v) {
      self.version = v
    })
  },
  methods: {
    checkUpgrade() {
      let self = this
      self.loader = loaderGen()
      self.loader.show(loadingOption)
      get({
        api: 'Client/ver?version=' + this.version,
        success: (ret) => {
          self.newVersion = ret.latestVersion
          self.dialogVisible = true
          self.downloadUrl = ret.url
          self.loader.hide()
        },
        error: (code, msg) => {
          self.loader.hide()
          alert(msg)
        }
      })
    },
    cancelPressed() {
      this.dialogVisible = false
    },
    upgradePressed() {
      this.dialogVisible = false
      if (this.hasNew) {
        utilsModule.openUrl(this.downloadUrl)
      }
    }
  }
}
</script>
<style scoped>
  .root {
    background: #15263D;
  }
  .top-part {
    background: #203956;
    padding: 40 12 40 12;
    text-align: center;
    margin-bottom: 12;
  }
  .top-part>image {
    width: 207;
    height: 46;
  }
  .top-part>label {
    font-size: 14;
    color: #6292BE;
  }
  .line {
    height: 50;
    padding-left: 12;
    padding-right: 12;
    border-bottom-color: #274867;
    border-bottom-width: 1;
    background: #203956;
  }
  .line>.title {
    color: white;
    font-size: 16;
  }
  .line>.desc {
    color: #6292BE;
    font-size: 16;
  }
  .line>.indicator {
    width: 18;
    height: 18;
    margin-left: 10;
  }
  .mask {
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
  }

  .dialog {
    width: 280;
    background-color: #22334d;
    border-radius: 4;
    text-align: center;
  }

  .dialog>.top-icon {
    width: 100%;
    height: 140;
  }
  .version {
    color: white;
    font-size: 16;
    margin-top: 17;
  }
  .dialog>.desc {
    color: #6292BE;
    font-size: 14;
    margin-top: 10;
  }

  .dialog-btns {
    color: white;
    font-size: 16;
    height: 43;
    border-top-width: 0.5;
    border-top-color: #264664;
    margin-top: 40;
  }
  .dialog-btns >button {
    background-color: transparent;
    border-width: 1;
    border-color: transparent;
  }

  .ok-btn {
    color: #01ECF4;
    text-transform: none;
  }

  .divider {
    width: 0.5;
    height: 20;
    background-color: #6292BE;
  }

</style>
